<template>
    <div class="add myFlex">
        <div class="addWindow myFlex">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="padding-top: 40px">
                <el-form-item label="名称" prop="name" class="myFlex">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="单价" prop="price" class="myFlex">
                    <el-input v-model="ruleForm.price"></el-input>
                </el-form-item>
                <el-form-item label="数量" prop="amount" class="myFlex">
                    <el-input v-model="ruleForm.amount"></el-input>
                </el-form-item>

                <el-form-item label="- 展示" prop="pictrue">
                    <div v-if="!isUpload">
                        <el-button style="padding:10px" @click="handleUpload">
                            <div style="width: 150px;height: 150px;background-color: skyblue;" class="myFlex">
                                <span class="el-icon-plus"></span>
                            </div>
                        </el-button>
                        <input type="file" id="chooseFile" style="display:none;">
                    </div>
                    <div v-else>
                        <img :src="require('@/assets/drinks/默认果汁.jpg')" style="width: 180px;height: 180px">
                    </div>
                </el-form-item>

                <el-form-item class="myFlex">
                    <el-button type="primary" @click="submitForm('ruleForm')">
                        <span class="el-icon-circle-check"></span>
                        确认添加
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Add",
        data() {
            return {
                isUpload:false,
                ruleForm: {
                    name: '',
                    price: '',
                    beverages:[],
                },
                rules: {
                    name: [
                        { required: true, message: '请输入商品名称', trigger: 'blur' },
                    ],
                    price: [
                        { required: true, message: '请输入商品单价', trigger: 'blur' },
                    ],
                    amount: [
                        { required: true, message: '请输入商品数量', trigger: 'blur' },
                    ],
                }
            };
        },
        methods:{
            handleUpload(){
                this.isUpload = true
            },
            submitForm(formName) {

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //解决数据匹配的问题！
                        let newItem = {
                            name:this.ruleForm.name,
                            price:parseFloat(this.ruleForm.price),
                            remain:parseInt(this.ruleForm.amount),
                            edit:false,
                            clicked:false
                        };
                        this.$store.state.drinks.push(newItem)

                        console.log(this.tableData);
                        ///////////////////////////////////////////
                        //延迟跳转页面
                        const loading = this.$loading({
                            lock: true,
                            text: '更新库存中',
                            spinner: 'el-icon-loading',
                            target:'.add',		//指定 target 即可！
                            background: 'rgba(0, 0, 0, 0.7)'
                        });

                        const _this = this
                        setTimeout(() => {
                            loading.close();
                            _this.$router.push('/inventory');
                            _this.$message({
                                type: 'success',
                                message: '添加成功！',
                                offset:250,
                                duration:1000
                            });
                        }, 600);

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    }
</script>

<style scoped>

    .myFlex{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .add{
        width: 100%;
        height: 85%;
    }

    .addWindow{
        width: 60%;
        height: 85%;
        background-color: gainsboro;
        border-radius: 20px;
        opacity: 0.8;
    }

    .img_div a:hover .mask {
        opacity: 1;
    }

    @media screen and (max-width: 1200px) {
        .addWindow{
            width: 95%;
            height: 85%;
            background-color: gainsboro;
            border-radius: 20px;
            opacity: 0.8;
        }
    }

</style>